<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard</title>
    <style>
        /* Reset some basic styling */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        /* Header Styles */
        header {
            background-color: #333;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        header .logo h1 {
            margin: 0;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin: 0 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        nav ul li a:hover {
            text-decoration: underline;
        }

        /* Main Section */
        main {
            padding: 2rem;
        }

        /* Admin Information Section */
        .admin-info {
            background-color: white;
            padding: 1rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .admin-info h2 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .admin-info p {
            font-size: 1.2rem;
        }

        /* Book Management Section */
        .book-management {
            background-color: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .book-management h2 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f4f4f4;
        }

        .action-buttons a {
            margin-right: 10px;
            text-decoration: none;
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
        }

        .action-buttons a:hover {
            background-color: #45a049;
        }

        .action-buttons .delete {
            background-color: #f44336;
        }

        .action-buttons .delete:hover {
            background-color: #e53935;
        }

        /* Footer Section */
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 1rem;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
<!-- Header Section -->
<header>
    <div class="logo">
        <h1>Admin Dashboard</h1>
    </div>
    <nav>
        <ul>
            <li><a href="/admin">Dashboard</a></li>
            <li><a href="/admin/manage-books">Manage Books</a></li>
            <li><a href="/logout">Logout</a></li>
        </ul>
    </nav>
</header>

<!-- Main Content Section -->
<main>
    <!-- Admin Information Section -->
    <section class="admin-info">
        <h2>Admin Information</h2>
        <p><strong>Username:</strong> <span id="username">AdminUser</span></p>
        <p><strong>Email:</strong> <span id="email">admin@example.com</span></p>
        <p><strong>Role:</strong> <span id="role">ADMIN</span></p>
    </section>

    <!-- Book Management Section -->
    <section class="book-management">
        <h2>Book Management</h2>
        <button onclick="window.location.href='/admin/books/new'">Add New Book</button>
        <table>
            <thead>
            <tr>
                <th>Title</th>
                <th>Author</th>
                <th>ISBN</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody id="bookList">
            <!-- Books will be dynamically populated here -->
            </tbody>
        </table>
    </section>
</main>

<!-- Footer Section -->
<footer>
    <p>&copy; 2024 Library Management System</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // This script will dynamically load book data from backend and handle delete action
    document.addEventListener("DOMContentLoaded", function() {
        // Fetch book data from the backend
        const bookList = document.getElementById('bookList');

        axios.get('/admin/books')  // Adjust the API path as needed
            .then(response => {
                const books = response.data;

                // Clear existing list
                bookList.innerHTML = "";

                // Render books dynamically
                books.forEach(book => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${book.title}</td>
                        <td>${book.author}</td>
                        <td>${book.isbn}</td>
                        <td class="action-buttons">
                            <a href="/admin/books/${book.id}/edit">Edit</a>
                            <a href="#" class="delete" data-id="${book.id}">Delete</a>
                        </td>
                    `;
                    bookList.appendChild(tr);
                });

                // Handle delete actions
                const deleteLinks = document.querySelectorAll('.delete');
                deleteLinks.forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();  // Prevent the default action of the link
                        const bookId = e.target.getAttribute('data-id');

                        // Send delete request to backend
                        axios.delete(`/admin/books/${bookId}`)
                            .then(response => {
                                alert('Book deleted successfully');
                                // Remove the book row from the table
                                const row = e.target.closest('tr');
                                row.remove();
                            })
                            .catch(error => {
                                console.error('Error deleting book:', error);
                                alert('Error deleting the book');
                            });
                    });
                });
            })
            .catch(error => {
                console.error('Error fetching books:', error);
                alert('Failed to load books');
            });
    });
</script>
</body>
</html>





<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>Admin Dashboard</title>-->
<!--    <style>-->
<!--        /* Reset some basic styling */-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--        }-->

<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            line-height: 1.6;-->
<!--            background-color: #f4f4f4;-->
<!--        }-->

<!--        /* Header Styles */-->
<!--        header {-->
<!--            background-color: #333;-->
<!--            color: white;-->
<!--            padding: 1rem;-->
<!--            text-align: center;-->
<!--        }-->

<!--        header .logo h1 {-->
<!--            margin: 0;-->
<!--        }-->

<!--        nav ul {-->
<!--            list-style-type: none;-->
<!--            padding: 0;-->
<!--        }-->

<!--        nav ul li {-->
<!--            display: inline;-->
<!--            margin: 0 15px;-->
<!--        }-->

<!--        nav ul li a {-->
<!--            color: white;-->
<!--            text-decoration: none;-->
<!--            font-weight: bold;-->
<!--        }-->

<!--        nav ul li a:hover {-->
<!--            text-decoration: underline;-->
<!--        }-->

<!--        /* Main Section */-->
<!--        main {-->
<!--            padding: 2rem;-->
<!--        }-->

<!--        /* Admin Information Section */-->
<!--        .admin-info {-->
<!--            background-color: white;-->
<!--            padding: 1rem;-->
<!--            margin-bottom: 2rem;-->
<!--            border-radius: 8px;-->
<!--            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);-->
<!--        }-->

<!--        .admin-info h2 {-->
<!--            margin-bottom: 1rem;-->
<!--            font-size: 1.5rem;-->
<!--        }-->

<!--        .admin-info p {-->
<!--            font-size: 1.2rem;-->
<!--        }-->

<!--        /* Book Management Section */-->
<!--        .book-management {-->
<!--            background-color: white;-->
<!--            padding: 1rem;-->
<!--            border-radius: 8px;-->
<!--            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);-->
<!--        }-->

<!--        .book-management h2 {-->
<!--            margin-bottom: 1rem;-->
<!--            font-size: 1.5rem;-->
<!--        }-->

<!--        table {-->
<!--            width: 100%;-->
<!--            border-collapse: collapse;-->
<!--        }-->

<!--        table, th, td {-->
<!--            border: 1px solid #ddd;-->
<!--        }-->

<!--        th, td {-->
<!--            padding: 8px;-->
<!--            text-align: left;-->
<!--        }-->

<!--        th {-->
<!--            background-color: #f4f4f4;-->
<!--        }-->

<!--        .action-buttons a {-->
<!--            margin-right: 10px;-->
<!--            text-decoration: none;-->
<!--            padding: 5px 10px;-->
<!--            background-color: #4CAF50;-->
<!--            color: white;-->
<!--            border-radius: 4px;-->
<!--        }-->

<!--        .action-buttons a:hover {-->
<!--            background-color: #45a049;-->
<!--        }-->

<!--        .action-buttons .delete {-->
<!--            background-color: #f44336;-->
<!--        }-->

<!--        .action-buttons .delete:hover {-->
<!--            background-color: #e53935;-->
<!--        }-->

<!--        /* Footer Section */-->
<!--        footer {-->
<!--            background-color: #333;-->
<!--            color: white;-->
<!--            text-align: center;-->
<!--            padding: 1rem;-->
<!--            position: fixed;-->
<!--            width: 100%;-->
<!--            bottom: 0;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--&lt;!&ndash; Header Section &ndash;&gt;-->
<!--<header>-->
<!--    <div class="logo">-->
<!--        <h1>Admin Dashboard</h1>-->
<!--    </div>-->
<!--    <nav>-->
<!--        <ul>-->
<!--            <li><a href="/admin">Dashboard</a></li>-->
<!--            <li><a href="/admin/manage-books">Manage Books</a></li>-->
<!--            <li><a href="/logout">Logout</a></li>-->
<!--        </ul>-->
<!--    </nav>-->
<!--</header>-->

<!--&lt;!&ndash; Main Content Section &ndash;&gt;-->
<!--<main>-->
<!--    &lt;!&ndash; Admin Information Section &ndash;&gt;-->
<!--    <section class="admin-info">-->
<!--        <h2>Admin Information</h2>-->
<!--        <p><strong>Username:</strong> <span id="username">AdminUser</span></p>-->
<!--        <p><strong>Email:</strong> <span id="email">admin@example.com</span></p>-->
<!--        <p><strong>Role:</strong> <span id="role">ADMIN</span></p>-->
<!--    </section>-->

<!--    &lt;!&ndash; Book Management Section &ndash;&gt;-->
<!--    <section class="book-management">-->
<!--        <h2>Book Management</h2>-->
<!--        <button onclick="window.location.href='/admin/books/new'">Add New Book</button>-->
<!--        <table>-->
<!--            <thead>-->
<!--            <tr>-->
<!--                <th>Title</th>-->
<!--                <th>Author</th>-->
<!--                <th>ISBN</th>-->
<!--                <th>Actions</th>-->
<!--            </tr>-->
<!--            </thead>-->
<!--            <tbody id="bookList">-->
<!--            &lt;!&ndash; Books will be dynamically populated here &ndash;&gt;-->
<!--            <tr>-->
<!--                <td>Spring in Action</td>-->
<!--                <td>Craig Walls</td>-->
<!--                <td>9781617294945</td>-->
<!--                <td class="action-buttons">-->
<!--                    <a href="/admin/books/1/edit">Edit</a>-->
<!--                    <a href="/admin/books/1/delete" class="delete">Delete</a>-->
<!--                </td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>Java in Action</td>-->
<!--                <td>John Smith</td>-->
<!--                <td>9781118295797</td>-->
<!--                <td class="action-buttons">-->
<!--                    <a href="/admin/books/2/edit">Edit</a>-->
<!--                    <a href="/admin/books/2/delete" class="delete">Delete</a>-->
<!--                </td>-->
<!--            </tr>-->
<!--            </tbody>-->
<!--        </table>-->
<!--    </section>-->
<!--</main>-->

<!--&lt;!&ndash; Footer Section &ndash;&gt;-->
<!--<footer>-->
<!--    <p>&copy; 2024 Library Management System</p>-->
<!--</footer>-->

<!--<script>-->
<!--    // This script will dynamically load book data if needed-->
<!--    document.addEventListener("DOMContentLoaded", function() {-->
<!--        // Fetch book data (this is just an example, replace with actual data fetching if necessary)-->
<!--        const bookList = document.getElementById('bookList');-->

<!--        // Example of dynamic data rendering, assuming you fetch the book list from the backend-->
<!--        const books = [-->
<!--            { title: "Spring in Action", author: "Craig Walls", isbn: "9781617294945", id: 1 },-->
<!--            { title: "Java in Action", author: "John Smith", isbn: "9781118295797", id: 2 }-->
<!--        ];-->

<!--        // Clear existing list-->
<!--        bookList.innerHTML = "";-->

<!--        // Render books-->
<!--        books.forEach(book => {-->
<!--            const tr = document.createElement('tr');-->
<!--            tr.innerHTML = `-->
<!--                    <td>${book.title}</td>-->
<!--                    <td>${book.author}</td>-->
<!--                    <td>${book.isbn}</td>-->
<!--                    <td class="action-buttons">-->
<!--                        <a href="/admin/books/${book.id}/edit">Edit</a>-->
<!--                        <a href="/admin/books/${book.id}/delete" class="delete">Delete</a>-->
<!--                    </td>-->
<!--                `;-->
<!--            bookList.appendChild(tr);-->
<!--        });-->
<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->




<!--&lt;!&ndash;<!DOCTYPE html>&ndash;&gt;-->
<!--&lt;!&ndash;<html xmlns:th="http://www.thymeleaf.org">&ndash;&gt;-->
<!--&lt;!&ndash;<head>&ndash;&gt;-->
<!--&lt;!&ndash;    <title>Admin Page</title>&ndash;&gt;-->
<!--&lt;!&ndash;</head>&ndash;&gt;-->
<!--&lt;!&ndash;<body>&ndash;&gt;-->
<!--&lt;!&ndash;<h2>Welcome Admin</h2>&ndash;&gt;-->
<!--&lt;!&ndash;<p>This is the admin page.</p>&ndash;&gt;-->
<!--&lt;!&ndash;</body>&ndash;&gt;-->
<!--&lt;!&ndash;</html>&ndash;&gt;-->
